<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="main">
            <div class="header-top">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>修改密码</el-breadcrumb-item>
              </el-breadcrumb>
              <h2 class="title">修改密码</h2>
            </div>
            <div class="row">
              <h3>修改登录密码</h3>
              <el-form label-width="100px" :rules="rules" ref="ruleForm" :model="formInline"  class="demo-ruleForm">

                <el-form-item label="原密码" prop="oldpassword">
                  <el-input type="password" v-model="formInline.oldpassword" placeholder="原密码" ></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpassword">
                  <el-input type="password" v-model="formInline.newpassword" placeholder="账户名称" ></el-input>
                </el-form-item>
                
                <el-form-item label="确认新密码" prop="confirmnewpassword">
                  <el-input type="password" v-model="formInline.confirmnewpassword" placeholder="确认新密码" ></el-input>
                </el-form-item>
  
                <el-form-item>
                  <el-button type="primary" @click="onSubmit('ruleForm')">确定修改</el-button>
  
                </el-form-item>

              </el-form>

            </div>
            <div class="row mar-top">
              <h3>修改下发/代付密码</h3>
              <el-form label-width="100px" :rules="rules2" ref="ruleForm2" :model="ruleForm2"  class="demo-ruleForm">

                <el-form-item label="原密码" prop="oldpassword">
                  <el-input type="password" v-model="ruleForm2.oldpassword" placeholder="原密码" ></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpassword">
                  <el-input type="password" v-model="ruleForm2.newpassword" placeholder="账户名称" ></el-input>
                </el-form-item>
                
                <el-form-item label="确认新密码" prop="confirmnewpassword">
                  <el-input type="password" v-model="ruleForm2.confirmnewpassword" placeholder="确认新密码" ></el-input>
                </el-form-item>
  
                <el-form-item>
                  <el-button type="primary" @click="onSubmit2('ruleForm2')">确定修改</el-button>
  
                </el-form-item>

              </el-form>

            </div>
            
          </div>
          
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>
<script>
import { getCookie } from "./until/index";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formInline.newpassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.newpassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      value5:'',
      pagesize: 10, //每页显示条数
      currentPage: 1, //初始页
      total: 0, //总条数
      formInline: {
        oldpassword:'',
        newpassword:'',
        confirmnewpassword:''
      },
      ruleForm2: {
        oldpassword:'',
        newpassword:'',
        confirmnewpassword:''
      },
      rules:{
        oldpassword:[{required: true, message: '请输入原密码', trigger: 'blur'}],
        newpassword:[{required: true, message: '请输入新密码', trigger: 'blur'}],
        confirmnewpassword:[{required: true, validator: validatePass, trigger: 'blur'}]
      },
      rules2:{
        oldpassword:[{required: true, message: '请输入原密码', trigger: 'blur'}],
        newpassword:[{required: true, message: '请输入新密码', trigger: 'blur'}],
        confirmnewpassword:[{required: true, validator: validatePass2, trigger: 'blur'}]
      },
    };
  },
  created() {
    // this.$ajax.get("getSmsUserSummary.ashx?userId=" +getCookie("userid") +"&token=" +getCookie("token"))
    //   .then(res => {
    //     if (res.data.code === "200") {
    //       var data = res.data.data;
    //       this.data = data;
    //     } else {
    //       this.$message.error(res.data.msg + "请退出后重新登录");
    //     }
    //   })
    //   .catch(error => {
    //     console.log(error);
    //   });
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      
    },
    onSubmit2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      
    },
    handleCurrentChange(num) {
      this.currentPage = num;
      
    },
    balance(){

    }
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  height: 100%;
}

.header-top{
  margin: -20px -20px 20px;
  padding: 15px 20px;
  background: #fff;
  
}
.mar-top{
  margin-top: 15px
}
.header-top .title{
  margin:15px 0 0;
  font-weight: 600;
  text-align: left;
  font-size: 18px;
}
.demo-ruleForm {
    width: 460px;
}
.el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
    width: 360px;
}

.el-select {
    width: 360px;
}

.row{
  background: #fff;
  padding: 20px 30px;
  text-align: left
}
.row h3{
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 20px;
}
.block {
  padding: 20px;
}
.message{
  margin-top: 20px;
}
</style>
  